<template>
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search"></searchData>
    
    <a-card :bordered="false" style="over-flow:scroll">
      <title-name title="设计计划实施"></title-name>
      <div>
        <a-row>
          <a-col :md="24" :sm="19">
            <div class="table-operator">
              <div class="pub-table-select-count">
                <a-icon type="info-circle" theme="twoTone"/>
                <span> 项目：{{ name }} </span>&nbsp;
                <span>节点共计/已完成/未完成： {{total.total.total}}/{{total.total.complete}}/{{total.total.notComplete}}</span>
                <span>一级节点共计/已完成/未完成： {{total.firstNode.total}}/{{total.firstNode.complete}}/{{total.firstNode.notComplete}}</span>
                <span>二级节点共计/已完成/未完成：{{total.secondNode.total}}/{{total.secondNode.complete}}/{{total.secondNode.notComplete}}</span>
                <span>三级节点共计/已完成/未完成： {{total.thirdNode.total}}/{{total.thirdNode.complete}}/{{total.thirdNode.notComplete}}</span>
              </div>
            </div>
            <s-table
                    ref="table"
                    size="default"
                    rowKey="row.id"
                    :columns="columns"
                    :data="loadData"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                    :rowSelection="rowSelection"
                    showPagination="auto">
              <span slot="action" slot-scope="text, record">
                <template>
                <a @click="handleSub(record,'view')">查看</a>
                  <a-divider type="vertical"/>
                <a @click="handleEdit(record)">节点维护</a>
                </template>
              </span>
            </s-table>
          </a-col>
        </a-row>
      </div>
    
    </a-card>
    
    <a-modal
            title="设计节点维护"
            :visible="visible"
            :confirm-loading="confirmLoading"
            width="1000px"
            @ok="handleOk"
            @cancel="handleCancel">
      <a-form>
  
        <title-name title="设计节点信息"></title-name>
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="项目名称"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.projectName"
                       placeholder="请输入" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="阶段/类别"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.name"
                       placeholder="请输入" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="业务事项"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.matter"
                       placeholder="请输入" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="验收资料"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.verification"
                       placeholder="请输入" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="完成标准"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.completeStandard"
                       placeholder="请输入" type="textarea" disabled/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-row>
          <a-col :md="24" :sm="24">
            <a-form-item
                    label="维护类型"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <a-select v-model="form.type">
                <a-select-option value="1">节点记录</a-select-option>
                <a-select-option value="2">节点完成维护</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24" v-if="form.type=='2'">
            <a-form-item
                    label="节点完成时间"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <!-- <a-select v-model="form.nodeCompleteDate">
              </a-select> -->
              <a-date-picker v-model="form.nodeCompleteDate" @change="onChange" />
            </a-form-item>
          </a-col>
            </a-row>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
                    label="情况说明"
                    :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
                    :wrapperCol="{ lg: { span: 21 }, sm: { span: 21 } }">
              <BaseInput v-model="form.information"
                       placeholder="请输入" type="textarea"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
  
      <title-name title="上传相关附件"></title-name>
      <div>
        <a-row>
          <a-col :md="24" :sm="19">
            <div class="table-operator">
              <a-row>
                <a-col :md="24" :sm="24">
                  <!-- <a-upload
                      name="file"
                      :multiple="true"
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                      :headers="headers"
                      @change="handleChange"
                    >
                      <a-button> <a-icon type="upload" /> Click to Upload </a-button>
                    </a-upload> -->
                  <a-button type="primary"  @click="goAdd()">上传</a-button>
                  <a-button type="primary"  @click="goAdd()">删除</a-button>
                </a-col>
              </a-row>
            </div>
            <a-table :columns="fileColumns" :data-source="form.file" bordered>
              
            </a-table>
            <!-- <s-table
                    ref="table"
                    size="default"
                    rowKey="row.id"
                    :columns="fileColumns"
                    :data="form.file"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                    :rowSelection="rowSelection"
                    showPagination="auto">
            </s-table> -->
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { getEvaluateList  ,addEvaluateList,getEvaluateListTotal} from '@/api/evaluate'
  import { getnodeList , getnodeListTotal , saveNodeMaintain} from '@/api/design/planConstruction'
  const searchArr = [
    // 搜索框
    {
      name: '阶段类别',
      value: 'name',
      type: 'input'
    },
    {
      name: '业务事项',
      value: 'matter',
      type: 'input'
    },
    {
      name: '管控级别',
      value: 'level',
      type: 'input'
    },
    {
      name: '状态',
      type: 'select',
      value: 'status',
      data: [
        {
          value: '0',
          label: '可用'
        },
        {
          value: '1',
          label: '不可用'
        }
      ]
    },
  ]
  const columns = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '阶段类别',
      dataIndex: 'name'
    },
    {
      title: '业务事项',
      dataIndex: 'matter',

    },
    {
      title: '管控级别',
      dataIndex: 'level',

    },
    {
      title: '周期（天）',
      dataIndex: 'duration',
    },
    {
      title: '计划开始时间',
      dataIndex: 'startDate',
    },
    {
      title: '计划完成时间',
      dataIndex: 'planCompleteDate',
    },
    {
      title: '实际完成时间',
      dataIndex: 'completeDate',
    },
    {
      title: '完成标准',
      dataIndex: 'completeStandard',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const fileColumns = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '附件名称',
      dataIndex: 'name'
    },
    {
      title: '附件格式',
      dataIndex: 'type',

    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name:'a'+ Date.now(),
    components:{
      STable
    },
    data(){
      this.columns = columns
      this.fileColumns = fileColumns
      this.searchArr = searchArr
      return{
        // 查询参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return getnodeList(requestParameters)
            .then(res => {
              return res
            })
        },
        selectedRowKeys:'',
        selectedRows:'',
        name:'',
        total:{},
        confirmLoading:false,
        form:{
          name:'',
          status:''
        },
        visible:false
      }
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange
        }
      }
    },
    created() {
      this.name = this.$route.query.name
      this.getnodeListTotal()
    },
    methods:{
      getnodeListTotal(){
        getnodeListTotal().then((res)=>{
          this.total = res
          console.log(res)
        })
      },
      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },
      onChange(value,dateString){
        console.log(dateString)
        this.form.nodeCompleteDate = dateString                            
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(selectedRowKeys)
        console.log(selectedRows)
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      search(){
        this.$refs.table.refresh(true)
      },
      goAdd(){
        this.visible = true
      },
      handleSub(record,type){
        this.$router.push({
          path:"/project/evalution/editScore",
          query:{
            id:record.id,
            name:record.name,
            status:record.status,
            type:type
          }
        })
      },
      handleEdit(record){
        this.visible = true
        this.form = record
      },
      handleOk(){
        this.visible = false
        saveNodeMaintain(this.form).then((res)=>{
          if(res.code=='200'){
            this.$message.success("新增成功")
          }
          this.$refs.table.refresh(true)
        })
      },
      handleCancel(){
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .input{
    width:100%
  }
  .notShow{
    display:none
  }
</style>
